<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/mui.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
		<script type="text/javascript" src="../js/head_public.js" ></script>
		<script src="../js/mui.dtpicker.js"></script>
	    <script src="../js/mui.picker.min.js"></script>		
	    <script src="../js/common.js"></script>		
	    <script src="../js/session.js"></script>		
		<style>
			.file{position: absolute;top: 0rem;right:0.1rem ;z-index: 1;opacity: 0;}
			.kong{background: #efeff4;}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			.xinbie{width: 90%;margin: auto;border-bottom: 1px solid #EEEEEE;overflow: hidden;color: #666;}
			.xinbie span,.baoimg-container p span{display: block;width: 25%;float: left;height: 1rem;line-height: 1rem;font-size: 14px;color: #333;}
			.radio-div input{display: none;}
			.radio-div img{display: block;width: 0.4rem;float: left;}
			.radio-div{padding-top: 0.3rem;overflow: hidden;}
			.radio-div label{font-size: 14px;display: block;float: left;margin-left: 5px;}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			.mui-btn-blue, .mui-btn-primary, input[type=submit]{background: #ff7e00;border: none;}
			input{font-size: 14px;}
		</style>
	</head>
	<body>
		<div class="mui-bar mui-bar-nav ding-bar">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">个人资料</h1>
		</div>
		<div class="mui-content" style="padding-top: 50px;">
		    <form class="changep-form" style="background: #fff;">
		    	<div class="kong"></div>
		    	<p><span>真实姓名：</span><input type="text" name="member_truename" placeholder="请输入真实姓名" id="member_truename"></p>
		    	<div class="kong"></div>
		    	<p><span>昵称：</span><input type="text" name="member_username" placeholder="请输入昵称" id="member_username"></p>
		    	<div class="kong"></div>
		    	<div class="xinbie">
					<span>性别：</span>
					<div style="width: 75%;overflow: hidden;float: left;padding-left: 15px;">
						<div style="width: 35%;float: left;overflow: hidden;" class="radio-div"  flag="0" value="2">
							<img src="../images/radio-active.png" />
							<label for="nv">女</label>
						</div>
						<div style="width: 35%;float: left;overflow: hidden;" class="radio-div" flag="0" value="1">
							<img src="../images/radio-icon.png" />
							<label for="nan">男</label>
						</div>
	
					</div>
	
				</div>
				<div class="kong"></div>
		    	<p><span>出生日期：</span><input type="text" name="member_birthday" id="birthday"  placeholder="请选择出生日期" readonly="readonly"></p>
		    	<div class="kong"></div>
		    	<p><span>旧手机号：</span><input type="text"   id="phone" readonly="readonly"></p>
		    	<div class="kong"></div>
		    	<p><span>新手机号：</span><input type="text" name="member_mobile" placeholder="请输入新手机号码" id="member_mobile"></p>
		    	<p class="yzm"><input type="text" name="sms_captcha" placeholder="输入收到的验证码"><button type="button" id="hqyzm">获取验证码</button></p>
		        <div class="kong"></div>
		        <input type="hidden" id="true_yanzheng">
		        <div style="background: #efeff4;padding: 2px 0px;">
		        	 <button class="ch-ph-btn" type="button" style="font-weight: bold;letter-spacing: 2px;">提交</button>
		        </div>
		    </form>
		</div> 
		<script>
			var dateend=new Date();
				var endyear=dateend.getFullYear();
				endyear=parseInt(endyear);
//			$('#birthday').attr("data-options","{'type':'date','beginYear':1900,'endYear':}" )
			 $("#birthday").attr("data-options",'{"type":"date","beginYear":'+(endyear-100)+',"endYear":'+endyear+'}');
		    	mui(".xinbie").on("tap",".radio-div",function(){

				if($(this).attr("flag")=="0"){
		
					$(this).attr("flag","1");
					$(this).siblings(".radio-div").attr("flag","0");
				}else{
					$(this).attr("flag","0");
					$(this).siblings(".radio-div").attr("flag","1");
				}
				changeYangshi()
			})
	function changeYangshi(){
		$(".radio-div").each(function(i){
			var flag=$(this).attr("flag");
			if(flag=="1"){
				$(this).find("img").attr("src","../images/radio-active.png")
			}else{
				$(this).find("img").attr("src","../images/radio-icon.png")
			}
		})
	}
		</script>
		<script>
			(function($) {
				$.init();
				var result = $('#birthday');
				var btns = $('#birthday');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								_self.value=rs.text;
//								console.log(rs.text)
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								_self.value=rs.text;
//								result.innerText = '选择结果: ' + rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
			})(mui);
		</script>
		<script type="text/javascript">
			var userid=getCookie("userid");

			$(function(){
				var param={};
				if(userid==null||userid==""){
					location.href="../public/login.html";
				}
				
				param.member_id=userid;
				$.post(net+"public/index.php?s=api/member",param,function(res){
					if(res.result.member_truename!=""){
						$("#member_truename").val(res.result.member_truename)
					}
					if(res.result.member_username!=""){
						$("#member_username").val(res.result.member_username)
					}
					if(res.result.member_mobile!=""){
						$("#phone").val(res.result.member_mobile)
					}
					if(res.result.member_birthday!=""){
						$("#birthday").val(res.result.member_birthday)
					}
					if(res.result.member_sex!=""&&res.result.member_sex!=null){
						if(res.result.member_sex=="2"){
						
							$(".radio-div:nth-of-type(1)").attr("flag","1").siblings(".radio-div").attr("flag","0") ;
							$(".radio-div:nth-of-type(1)").find("img").attr("src","../images/radio-active.png").end().siblings(".radio-div").attr("src","../images/radio-icon.png") ;
						}else if(res.result.member_sex=="1"){
						
							$(".radio-div:nth-of-type(2)").attr("flag","1").siblings(".radio-div").attr("flag","0") ;;
							$(".radio-div:nth-of-type(2)").find("img").attr("src","../images/radio-active.png").end().siblings(".radio-div").find("img").attr("src","../images/radio-icon.png") ;
						}
					}
				})
			})
			mui.init()
		var t =59;
		// 验证码获取倒计时
		mui(".changep-form").on("tap","#hqyzm",function(){
			  // 检查手机号格式
			  disableBtn(this);
			  var username =/^1[0-9]{10,10}$/;
			  var phone = $("#member_mobile").val();
			  if(phone==null||phone==''){
			    alert("手机号不能为空");
			    return false;
			  }else if(!username.test(phone)){
			    alert("手机号格式不正确");
			    return false;
			  }
			   $(this).css("background-color","#999");
			  var param = {};  //register
			  // Checkphone			
			  param.sms_mobile = phone;
			  param.type = "4";
			  param.member_id=userid;
			  // 判断返回值
			  $.post(net+"/public/index.php?s=api/login/get_captcha",param,function(res){
			  	  if (res.code=="200") {
					$("#hqyzm").attr("disabled","disabled");
					$("#hqyzm").css({"background-color":"#999","border-color":"#999"});
				  	var inter=setInterval("refer()",1000); //启动1秒定时
				    $("#true_yanzheng").val(res.result.sms_captcha);
				  }
			  })
			  
		})
		//倒计时
		function refer()
		{
			
		  if(t==0)
		  {
		    $("#hqyzm").prop("disabled",false);//取消禁用
		    $("#hqyzm").css({"background-color":"#ff7e00","border-color":"#ff7e00"});
		    $("#hqyzm").html("获取验证码");
		  }else{
		    $("#hqyzm").html("获取验证码"+t+"s");
		    t--; // 计数器递减
		  }
		}
		$(".ch-ph-btn").click(function(){
		var $phone =/^1[0-9]{10,10}$/;
		var $passwd = /^\w{6,12}$/;
		var $username=/^[\u4e00-\u9fa5]{2,4}$/;
		var $card=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
		var params = $(".changep-form").serializeObject();//将表单序列化为JSON对象
		if(params.member_truename!=""){
			if(!$username.test(params.member_truename)){
				alert("请输入真实姓名！")
				return false;
			}
		}
		if(params.member_mobile!=""){
			if(!$phone.test(params.member_mobile)){
				alert("请输入正确的新手机号！")
				return false;
			}
			if(params.sms_captcha==""||params.sms_captcha==null){
				alert("请输入验证码！")
			}
		}
	    var sex="";
		$(".radio-div").each(function(i){
			if($(this).attr("flag")=="1"){
				sex=$(this).attr("value");
			}
		})
		if($("#true_yanzheng").val()!=null&&$("#true_yanzheng").val()!=""){
			params.true_captcha=$("#true_yanzheng").val();
		}
		params.member_id=userid;
		params.member_sex=sex;
		$.ajax( {
			type : "POST",
			url : net+"/public/index.php?s=api/member/edit_userinfo",
			data : params,
			success : function(msg) {
				//动态码错误或已过期，重新输入
				if(msg.code=="10001"){
					alert(msg.message)
				}else if(msg.code=="200"){
					alert("修改成功")
					 mui.back();
				}else if(msg.code=="1001"){
					alert(msg.message)
				}
//				location.href = "http://xf.xbtcsc.com.cn/index.php?user-phone";
			}
		});
	});

	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	}

		</script>
	</body>

</html>